<template>
  <div>
 <div class="container">
            <div style="text-align: center">
            </div>
            <div class="panel panel-primary">
              <div class="panel-heading" @click="getAllUser" style="background-color:#409EFF">
                <h3 class="panel-title">数据表格</h3>
              </div>
              <div class="panel-body">
                <form class="form-inline">
                  <div class="row">
      
                    <div class="form-group col-sm-4">
                      <label>用户账号:</label>
                      <input
                        type="name"
                        class="form-control"
                        id="exampleInputName3"
                        placeholder="用户账号"
                        v-model="account"
                      />
                    </div>
                    <div class="col-sm-7">
                      <button type="submit" @click="getByAccount" style="background-color:#409EFF" class="btn btn-primary">
                        搜索
                      </button>
                    </div>
                  </div>
                </form>

                <div class="table-responsive">
                <table class="table table-hover" style="margin-top: 2px">
                    <thead>
                    <tr>
                      <th></th>
                      <th>用户名</th>
                      <th>登录账号</th>
                      <th>密码</th>
                      <th>角色</th>
                      <th>编辑</th>
                      <th>删除</th>
                      <th>新增</th>
                    </tr>
                  </thead>
                  <tbody  v-for="(AllUser,index) in AllUser" :key="index">
                    <tr  v-show="!is_edit">
                      <td>
                       
                      </td>
                      <td  scope="row">{{AllUser.username}}</td>
                      <td>{{AllUser.account}}</td>
                      <td>{{AllUser.password}}</td>
                      <td>{{AllUser.userRole}}</td>
                      <td v-show="!is_edit"><i @click="edit" class="el-icon-edit" style="font-size:25px"></i></td>
                       <td v-show="is_edit"><i class="el-icon-check" style="font-size:25px"></i></td>
                        <td><i @click="del(AllUser.account)" class="el-icon-delete" style="font-size:25px"></i></td>
                      <td><i @click="add()" class="el-icon-circle-plus" style="font-size:30px"></i></td>
                      
                    </tr>

                    <tr  v-show="is_edit">
                      <td>
                      </td>
                      <td scope="row"><input style="width:50px" class="w-50" type="text" v-model="AllUser.username"/></td>
                      <td><input style="width:60px" class="w-50" type="text" v-model="AllUser.account"/></td>
                      <td><input style="width:30px" class="w-50" type="text" v-model="AllUser.password"/></td>
                      <td><input style="width:40px" class="w-50" type="text" v-model="AllUser.userRole"/></td>
                      <td  v-show="!is_edit"><i class="el-icon-edit" style="font-size:25px"></i></td>
                      <td v-show="is_edit"><i @click="save(AllUser)" class="el-icon-check" style="font-size:25px"></i></td>
                    </tr>
                  </tbody>
                </table>
                </div>
              </div>
            </div>
          </div>

       <!-- 新增课程弹窗 -->
    <div>
<el-drawer
  title="新增用户"
  :visible.sync="dialog"
  direction="ltr"
  ref="drawer"
  >
<el-form :model="user" label-position="left" label-width="100px" class="demo-ruleForm">
  <el-form-item  >
    <el-form-item label="用户名">
    <el-input v-model="user.username"></el-input>
  </el-form-item>
  <el-form-item label="账户">
    <el-input v-model="user.account"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="user.password"></el-input>
  </el-form-item>
  <el-form-item label="角色">
    <el-input v-model="user.userRole"></el-input>
  </el-form-item>
  </el-form-item>
  </el-form>
  <div class="dip">
  <el-button type="primary" @click="submit()">提交</el-button>
  <el-button @click="clean">重置</el-button>
  <el-button @click="cancelForm">取消</el-button>
  </div>
</el-drawer>

    </div>



  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'user',
    data(){
        return{
        dialog: false,
        is_edit:false,
        AllUser:{},
        account:'',
        user:{
        username:"",
        account:"",
        password:"",
        userRole:"",
      },
        }
    },
    methods:{
       //关闭新增弹窗
    cancelForm() {
      this.dialog = false;
      clearTimeout(this.timer);
    },
    //重置
    clean(){
      console.log("clean")
    },
    //按账户查询
    getByAccount(){
   console.log("按账户查询成绩")
         axios({
                url: `http://localhost:81/Users/${this.account}`,
                method: "GET",
            })
            .then(res=>{
              console.log(res.data)
              if(res.data.length!=0){
                      this.AllUser=res.data
              }
            })
            .catch(err=>{
              alert("信息有误！！！")
              console.log(err)
            })
    },
    //保存修改
    save(AllUser){
       console.log("保存修改")
       axios({
                url: "http://localhost:81/Users",
                method: "PUT",
                data:JSON.stringify(AllUser),
                headers : {
                'Content-Type':'application/json;charset=utf-8'
    },
            })
            this.is_edit=false;
    },

        //编辑信息
    edit(){
      console.log("编辑")
       this.is_edit=true;

    },
    //删除
    del(account){
           this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axios({
                url: "http://localhost:81/Users",
                method: "delete",
                params:{account}
    })
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getAllStudent()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

      //新增
    add(){
      this.dialog = true
      console.log("新增")
      console.log(this.course)
     
     
    },
        //查询全部课程信息，管理员权限3
    getAllUser(){
      console.log("获取所有用户信息")
       axios({
                url: "http://localhost:81/Users",
                method: "GET",
            })
            .then(res=>{
              console.log(res.data)
              if(res.data.length!=0){
                      this.AllUser=res.data
              }
            })
            .catch(err=>{
              console.log(err)
            })
    },
    //提交新增
    submit(){
      axios({
                url: "http://localhost:81/Users",
                method: "POST",
                data:JSON.stringify(this.user),
                headers : {
                'Content-Type':'application/json;charset=utf-8'
    },
            }).then(res=>{
              console.log("添加课程成功"+res.data)
               this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.cancelForm()
          this.getAllUser()
            }).catch(err=>{
              console.log("添加学生失败"+err)
                 this.$message({
            type: 'fail',
            message: '添加失败!'
          });
            })
    },
    },
     created() {
        this.getAllUser()



     }

}
</script>

<style>

</style>